<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>增加主贴</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <script type="text/javascript" th:src="@{/static/js/jquery/jquery.min.js}"></script>
    <script th:src="@{/static/js/jquery.validation/1.14.0/jquery.validate.min.js}"></script>
    <script th:src="@{/static/js/jquery.validation/1.14.0/messages_zh.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/laypage/1.2/laypage.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/layer/layer.js}"></script>
    <style>
        input.error{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="addUserForm">
        <br>
        <div class="form-group">
            <label for="userName" >用户名：</label>
            <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="userPwd">密　码：</label>
            <input type="text" class="form-control" id="userPwd" name="userPwd" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="rePwd">确认密码：</label>
            <input type="text" class="form-control" id="rePwd" name="rePwd" placeholder="请输入再次密码" onblur="checkRepass()">
        </div>
        <div class="form-group">
            <label for="userPhone">手机号：</label>
            <input type="text" class="form-control" id="userPhone" name="userPhone" placeholder="请输入手机号" onblur="checkTel()">
        </div>
        <div class="form-group">
            <label >性　别：</label>
            <input type="radio"  class="userGender" value="1" name="userGender">男
            <input type="radio"  class="userGender" value="0" name="userGender">女
        </div>
        <div class="form-group">
            <button type="button" id="saveBtn" class="btn btn-success">提交</button>
            <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
        </div>
    </form>
</div>
<script type="text/javascript" >

    //验证两次输入密码是否一致
    var checkRepassAnswer;
    function checkRepass() {
        var onepass=$("#userPwd").val();
        var repass=$("#rePwd").val();
        if(onepass!=repass){
            checkRepassAnswer=0;//两次密码输入不一致，返回0
            layer.alert('两次输入的密码不一致！',{icon:2,title:'温馨提示'});
        }else{
            checkRepassAnswer=1;//两次密码输入一致，返回1
        }
    }

    //判断手机号格式，以及是否存在
    var checkTelAnswer;
    function checkTel() {
        var tel=$("#userPhone").val();
        console.log("tel"+tel)
        if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel))){//判断手机号是不是等于11位
            $.ajax({//手机号格式正确，异步判断该手机号是不是已经存在于数据库中
                url:"/user/checkPhone",
                type:"POST",
                data:{userPhone:$("#userPhone").val()},
                success:function(data){
                    console.log("msgPhone======="+data.msg)
                    checkTelAnswer=data.msg;//1 格式正确，0 格式错误
                    if(data.msg==0){
                        layer.alert('该手机号已注册！',{icon:2,title:'温馨提示'});
                    }
                }
            })
        }else{
            layer.alert('您的手机号格式输入错误！',{icon:2,title:'温馨提示'});
        }
    }

    var addUser=function(){
        $.ajax({
            type:"POST",
            //dataType:"json",
            url:"/user/addUser",
            data:{
                userName:$("#userName").val(),
                userPwd:$("#userPwd").val(),
                userPhone:$("#userPhone").val(),
                userGender:$("input[name='userGender']:checked").val(),
            },
            /**
             * success , error
             * 返回的每条数据是否是dataType中定义的数据类型。
             * 如果不定义dataType的类型，后台异步数据的，普通数据类型和String以及引用类型都可以用success来获取，
             * 定义dataType后，如果有部分数据不是或者哪怕一条数据没有严格的按照dataType定义的类型，程序就会进入到error:function(){****}
             *
             */
            success:function (data) {
                console.log("success:"+data.msg)
                $("#cancelBtn").click();
            },
            error:function (data) {
                console.log("error:"+data)
                $("#cancelBtn").click();
            }
        })
    }

    $("#saveBtn").on("click",function () {
        if(checkRepassAnswer==1&&checkTelAnswer==1&&$("input[name='userGender']:checked").val().length>0){
            addUser();
        }else{
            layer.alert('用户信息填写有误！',{icon:2,title:'温馨提示'});
        }
    });

    $("#cancelBtn").on("click",function () {
        var index=parent.layer.getFrameIndex(window.name);
        parent.getAllUser();
        parent.layer.close(index);
    });
</script>

</body>
</html>